<template>
  <el-dialog :visible.sync="dialog" :title="orderNo + '订单物流详情'" :close-on-click-modal="false" :lock-scroll="false" center @close="cancel">
    <el-timeline v-if="logistics && logistics.length > 0" class="timeline-container">
      <el-timeline-item
        v-for="(node, index) in logistics"
        :key="index"
        :icon="index === 0 ? 'el-icon-circle-check' : 'el-icon-arrow-up'"
        :color="index === 0 ? '#30B08F' : '#EBEEF5'"
        :timestamp="node.time"
      >
        <span :style="index === 0 ? 'color: #30B08F;' : ''">{{ node.context }}</span>
      </el-timeline-item>
    </el-timeline>
    <el-divider v-else content-position="center">暂无物流信息</el-divider>
    <div slot="footer">
      <el-button type="primary" @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { orderLogistics } from '@/api/hfy/escm'
export default {
  name: 'OrderLogisticsDialog',
  data() {
    return {
      dialog: false,
      orderNo: '', logistics: []
    }
  },
  created() {
  },
  methods: {
    show(orderNo) {
      this.dialog = true
      this.orderNo = orderNo
      orderLogistics(orderNo).then(res => {
        this.logistics = res
      })
    },
    cancel() {
      this.orderNo = ''
      this.logistics = []
      this.dialog = false
    }
  }
}
</script>
<style lang="scss">
.timeline-container{
  .el-timeline-item{
    padding-bottom: 30px;
    .el-timeline-item__node{
      width: 24px;
      height: 24px;
      left: -6px;
      .el-timeline-item__icon{
        font-size: 24px;
      }
    }
  }
}
</style>
